$(function () {
      intAcatcateList()
      function intAcatcateList() {
            axios({
                  url: '/my/article/cates',
                  method: 'get',
            }).then(res => {
                  // console.log(res);
                  //成功回调
                  if (res.data.status !== 0) {
                        return layer, msg(res.data.message)
                  }
                  let arr = []
                  res.data.data.forEach(function (value) {
                        arr.push(`<tr>
                     <td>${value.Id}</td>
                     <td>${value.name}</td>
                     <td>${value.alias}</td>
                     <td>
                         <button type="button" class="layui-btn layui-btn-xs" >修改</button>
                         <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" data-id="${value.Id}">删除</button>
                     </td>
                 </tr>
                     `)
                  })
                  $('tbody').empty().html(arr.join(''))
            })
      }
      let indexAdd = 0
      $('#addBtn').on('click', function () {
            indexAdd = layer.open({
                  type: 1,
                  title: '文章',
                  area: ['500px', '260px'],
                  content: `
                  <form  id="addForm" class="layui-form" action="">
                      <!-- 分类名称 -->
                      <div class="layui-form-item">
                          <label class="layui-form-label">分类名称</label>
                          <div class="layui-input-block">
                              <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                                  class="layui-input">
                          </div>
                      </div>
                      <!-- 分类别名 -->
                      <div class="layui-form-item">
                          <label class="layui-form-label">分类别名</label>
                          <div class="layui-input-block">
                              <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                                  class="layui-input">
                          </div>
                      </div>
                      <!-- 按钮区域 -->
                      <div class="layui-form-item">
                          <label class="layui-form-label"></label>
                          <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                      </div>
                  </form>
              `


            });
            //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。       
      })
      $("body").on('submit', '#addForm', function (e) {
            // 阻止默认提交
            e.preventDefault();
            // 发送ajax
            axios({
                  method: 'POST',
                  url: '/my/article/addcates',
                  data: $(this).serialize()
            }).then(res => {
                  // 判断
                  if (res.data.status != 0) {
                        return layer.msg(res.data.message);
                  }
                  // 成功提示
                  layer.msg('恭喜您，添加文章分类成功！');
                  // 刷新页面
                  intAcatcateList()
                  // 关闭弹出层
                  layui.layer.close(indexAdd)

            });
      })

      // 删除  事件委托修改删除
      $('body').on('click', '.layui-btn-danger', function (e) {
            if (this.innerText !== '删除') return
            // 阻止默认跳转
            e.preventDefault()
            // 弹出层删除询问框
            let data_this = $(this)
            layer.confirm('是否确认删除？', { icon: 3, title: '提示' }, function () {
                  // layer.close(index);
                  axios({
                        url: '/my/article/deletecate/' + data_this.attr('data-id'),
                        method: 'get',
                  }).then(res => {
                        //失败
                        if (res.data.status !== 0) {
                              return layer.msg(res.data.message);
                        }

                        layer.msg("恭喜您，删除文章分类成功！");
                        //渲染
                        intAcatcateList()

                  });
            });

            // 必须保留 必须删除

      })
      // 注册事件委托修改
      $('body').on('click', '.layui-btn.layui-btn-xs', function (e) {
            if (this.innerText !== '修改') return
            // 阻止默认提交
            e.preventDefault()
            axios({
                  url: '/my/article/cates/' + $(this).parents('tr').children()[0].innerText,
                  method: 'get',
            }).then(({ data: res }) => {
                  if (res.status !== 0) {
                        return layer.msg(res.messge)
                  }
                  indexAdd = layer.open({
                        type: 1,
                        title: '修改文章类别',
                        area: ['500px', '260px'],
                        content: `
                        <form  id="alterForm" class="layui-form" action="">
                            <!-- 修改 -->
                            <div class="layui-form-item" style="display: none;">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <input type="text" name="Id" required lay-verify="required" value="${res.data.Id}" placeholder="" autocomplete="off "
                                    class="layui-input" readonly="readonly">
                            </div>
                        </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required lay-verify="required" value="${res.data.name}" placeholder="" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <!-- 分类别名 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类别名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="alias" value="${res.data.alias}" required lay-verify="required" placeholder="" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <!-- 按钮区域 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </form>
                    `
                  });

            });
            // 修改文章分类
            $('body').on('submit', '#alterForm', function (e) {
                  // 阻止默认跳转
                  e.preventDefault()
                  // 修改分类
                  axios({
                        url: '/my/article/updatecate',
                        method: 'post',
                        data: $(this).serialize(),

                  }).then((res) => {
                        // 失败
                        if (res.data.status != 0) {
                              intAcatcateList()
                              return layer.msg(res.data.message)
                        }
                        // 渲染
                        intAcatcateList()
                        // 成功
                        layer.closeAll()
                        // 修改分类成功弹出层
                        layer.msg(res.data.message)

                  });
            })

      })


})
